<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>套餐消费记录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="/houtai/js/vue.js"></script>
    <script type="text/javascript" src="/houtai/js/jquery-2.1.4.js"></script>

    <link rel="stylesheet" href="/houtai/layuiadmin/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <!--设置layUI表格样式，自动换行-->
    <style>
        .layui-table-cell{
            height:35px;
            line-height: 35px;
        }
    </style>
</head>
<body>
<!--------------------------------------头部工具条------------------------------------------>
<script type="text/html" id="headbar">
    <div class="layui-btn-container"  >

    </div>
</script>
<!---------------------------------------------条件搜索框------------------------------------------->
<div class="demoTable" style="margin-top: 10px">
    <form id="serachForm" class="layui-form">
        &nbsp&nbsp用户电话:
        <div class="layui-inline" style="width: 180px">
            <input class="layui-input" name="usertel" id="usertel" autocomplete="off" style="width: 160px">
        </div>
        &nbsp&nbsp套餐名:
        <div class="layui-inline" style="width: 180px">
            <select name="mealId" id="mealId" lay-filter="aihao">
                <option value="" selected>全部</option>
                <option value="1" >活力会员套餐</option>
                <option value="2">黄金会员套餐</option>
                <option value="3">铂金会员套餐</option>
                <option value="4">砖石会员套餐</option>
            </select>
            <!--<input class="layui-input" name="mealName" id="mealName" autocomplete="off" style="width: 160px">-->
        </div>
        &nbsp&nbsp套餐金额:
        <div class="layui-inline" style="width: 180px">
         <!--   <select name="mealId" id="mealId" lay-filter="aihao">
                <option value="" selected>全部</option>
                <option value="1" >活力会员套餐</option>
                <option value="2">黄金会员套餐</option>
                <option value="3">铂金会员套餐</option>
                <option value="4">砖石会员套餐</option>
            </select>-->
            <input class="layui-input" name="mealMoney" id="mealMoney" autocomplete="off" style="width: 160px">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">消费时间:</label>
            <div class="layui-input-inline" style="width: 100px">
                <input type="text" name="startDate" id="startDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
            -
            <div class="layui-input-inline" style="width: 100px">
                <input type="text" name="endDate" id="endDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline" style="margin-left: 10px">
            <!--这个地方的不能直接使用button标签，使用button标签会重复提交数据-->
            <input type="button" class="layui-btn" data-type="reload" value="搜索">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>

    </form>
</div>

<!-----------------------------------------表格内容--------------------------------------------->
<div id="content">
    <table class="layui-table"
           lay-data="{url:'/houtai/page/finance/mealpay/list',page:true,totalRow:true,limit:10,limits:[10,20,10000],toolbar:'#headbar',
                     height:'full-100',loading:true,title:'套餐消费记录表',
                     //把返回的数据result转为换layUI需要的格式，此处返回的是mybatisPlus的IPage对象，具体返回值自己设定
                     parseData: function(res){ //res 即为原始返回的数据
                        return {
                            'code': res.code, //解析接口状态
                            'msg': res.message, //解析提示文本
                            'count': res.obj.totalSize, //解析数据长度
                            'data': res.li //解析数据列表
                          };
                       },
                //给表格设置一个ID
               id:'test'}"
           lay-filter="filter">
        <thead>
        <tr>
            <!--开起全选框-->
            <th lay-data="{checkbox:true,fixed:'left'}"></th>
            <th lay-data="{field:'vipMealpayId',hide:true}">套餐消费记录ID</th>
            <th lay-data="{field:'usertel',align: 'center',totalRowText:'合计'}">用户电话</th>
            <th lay-data="{field:'mealId',hide:true}">套餐ID</th>

            <th lay-data="{field:'mealName'}">套餐名</th>
            <th lay-data="{field:'mealMoney',width:200,totalRow: true,templet:function(d){
                return Number(d.mealMoney).toFixed(2);
            }}">套餐金额</th>
            <th lay-data="{field:'payTime'}">消费时间</th>
        </tr>
        </thead>
    </table>
</div>

<script src="/houtai/layuiadmin/layui/layui.js" charset="utf-8"></script>
<script src="/houtai/layuiadmin/layui/lay/modules/util.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    layui.use(['table','jquery','laypage','laydate','form','layer'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var form = layui.form;
        var layer = layui.layer;



        //加载日期选择插件
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });
        //刷新表单
        form.render();

        //设置搜索框查询条件
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                var str = $("#serachForm").serialize();
                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        usertel:$("#usertel").val(),
                        mealId:$("#mealId").val(),
                        mealMoney:$("#mealMoney").val(),
                        startDate:$("#startDate").val(),
                        endDate:$("#endDate").val()
                    }
                }, 'data');
            }
        };

        //监听搜索框提交按钮
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>

</body>
</html>